<div class="product-cases-index">
    <div class="row selector margin-reset">
        <div class="row">
            <div class="col-md-1 text-right">
                <i class=""></i>
                生活空间:
            </div>
            <div class="col-md-11">
                <ul>
                    <li class="<%= params[:category_id].blank? ? 'actived' : '' %>">
                        <a href="<%= params[:brand_id] ? product_cases_path(brand_id: params[:brand_id]) : product_cases_path %>">所有</a>
                        <div class="triangle"></div>
                        <i class="fa fa-check fa-icon"></i>
                    </li>
                    <!-- actived -->
                    <% Category.get_floor_category.children.each do |item| %>
                      <li class="<%= params[:category_id].to_s === item.id.to_s ? 'actived' : '' %>">
                          <a href="<%= params[:brand_id] ? product_cases_path(category_id: item.id, brand_id: params[:brand_id]) : product_cases_path(category_id: item.id) %>"><%= item.title %></a>
                          <div class="triangle"></div>
                          <i class="fa fa-check fa-icon"></i>
                      </li>
                    <%end %>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-1 text-right">
                <i class=""></i>
                品牌:
            </div>
            <div class="col-md-11">
                <ul>
                  <li class="<%= params[:brand_id].blank? ? 'actived' : '' %>">
                      <a href="<%= params[:category_id] ? product_cases_path(category_id: params[:category_id]) : product_cases_path %>">所有</a>
                      <div class="triangle"></div>
                      <i class="fa fa-check fa-icon"></i>
                  </li>
                  <% Brand.all.each do |item| %>
                    <li class="<%= params[:brand_id].to_s === item.id.to_s ? 'actived' : '' %>">
                        <a href="<%= params[:category_id] ? product_cases_path(brand_id: item.id, category_id: params[:category_id]) : product_cases_path(brand_id: item.id) %>"><%= item.title %></a>
                        <div class="triangle"></div>
                        <i class="fa fa-check fa-icon"></i>
                    </li>
                  <%end %>
                </ul>
            </div>
        </div>
    </div>

    <div class="row case-list grid">
      <% @product_cases.each do |product_case| %>
        <div class="case-card grid-item">
          <div class="image grid-item-image" @click="girdItemClick(<%= product_case.to_json %>)">
            <%= image_tag(product_case.image) %>
          </div>
          <a href="#" class="title"><%= product_case.title %></a>
          <% product_case.products.each do |product| %>
            <a class="product-info" href="<%= product_path(product) %>">
              <%= product_default_img product %>
              <div class="product-title">
                <%= product.title %>
              </div>
            </a>
          <% end %>
        </div>
      <% end %>
    </div>

    <el-dialog title="案例欣赏" :visible.sync="dialogTableVisible">
      <el-carousel :interval="5000" height="500px" indicator-position="outside">
        <el-carousel-item v-for="item in currentCases.images" :key="item">
          <img :src="item" alt="" style="width: 100%;">
        </el-carousel-item>
      </el-carousel>

      <a class="product-info" v-for="product in currentCases.products" :href="'/products/' + product.id" :key="product">
        <img :src="product.main_img_url" alt="">
        <div class="product-title">
          {{product.title}}
        </div>
      </a>
    </el-dialog>

    <%= render partial: 'shared/common_pagination', locals: { pagination: @product_cases} %>
</div>
